<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,shrink-to-fit=no">
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap-4.2.1-dist/css/bootstrap.css">
    <script src="../jquery.js"></script>
    <script src="http://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script>
    <script src="../bootstrap-4.2.1-dist/js/bootstrap.js"></script>
</head>
<body class="container">
    <h2 class="mb-5">工具提示事件</h2>
    <button class="btn btn-info ml-5" data-toggle="myTooltip" id="myTooltip">工具提示</button>
    <script>
        $(function(){
            $('#myTooltip').tooltip({
               title:"工具提示",
               trigger:"click",
            });
            $('#myTooltip').on('show.bs.tooltip',function(){
                alert("show.bs.tooltip");
                $(this).removeClass("btn-info").addClass("btn-primary")
            });
            $('#myTooltip').on('inserted.bs.tooltip',function(){
                alert("inserted.bs.tooltip");
                $(this).removeClass("btn-primary").addClass("btn-danger")
            });
            $('#myTooltip').on('shown.bs.tooltip',function(){
                alert("shown.bs.tooltip");
                $(this).removeClass("btn-danger").addClass("btn-info")
            });
            $('#myTooltip').on('hide.bs.tooltip',function(){
                alert("hide.bs.tooltip");
                $(this).removeClass("btn-info").addClass("btn-success")
            });
            $('#myTooltip').on('hidden.bs.tooltip',function(){
                alert("hidden.bs.tooltip");
                $(this).removeClass("btn-success").addClass("btn-info")
            });
        })
    </script>
</body>
</html>